<template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
import user from '@/api/user';
export default {
  name: "Age",
  data() {
    return {
      data: [],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
   async echarts() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
      let res = await user.people_flow_counting();
                    let data = res.data
                    let valueList = data.map(function (item, i) {
                    return {
                        name: item.name,
                        value: item.value,
                        itemStyle: {
                            normal: {
                                color: that.$colors[i]
                            }
                        }
                    };
                });
                    that.$emit('MarkTypeTotal',{peo_in:data[0].value,peo_out:data[1].value});
                    let option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            top: 0,
                            bottom: 10,
                            left: 0,
                            data: ['迁出','迁入'],
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        series: [
                            {
                                name: '次数',
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '50%'],
                                selectedMode: 'single',
                                data:valueList
                            }
                        ]
                    };
                    myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>
